<script setup>
// import {ref} from 'vue'
import {ref} from "vue";
import Message from "@/component/Message.vue";
let x = 1
console.info(x)
let text = '<span style="color: red">哈哈哈哈哈</span>'
let time = ref(new Date())// {value: ''}
let grade = 88
let name = ''
let pid = 'test1'
let arr = ref([1,2,3,4])
// 在js中定义一个学生对象数组 对象包含姓名、学号字段，自己创建5个学生放在数组，
// 在html中用表格显示数据
let students = [{name: '卢鑫培',sn: '1111'}]
// document.getElementById().onclick = function () {
//   document.getElementById().value
// }
let inputValue = ref('卢鑫培')// {value: '卢鑫培'}
const btnEvent = ()=>{
  console.info(inputValue.value)
}
setInterval(()=>{
  time.value = new Date()
},1000)
const addValue = () => {
  arr.value.push(inputValue.value)
}
</script>

<template>
  <div>
    <!--    表达式：能得到一个确切结果的代码 -->
    <h1>{{text.length}}</h1>
    <!--    指令： 带有v-前缀的特殊属性 -->
    <!--    v-text : 将变量的值赋予标签内部 -->
    <!--    v-html : 将变量的值赋予标签内部 编译html代码-->
    <!--    v-if: 根据变量的值来决定当前标签是否显示
       这个值可以是任意值，数字 数组 对象 字符串。。。
       false 0 '' null undefined ===》 false
       [] {} ===>true
    -->
    <!--   v-show: 从视觉角度、语法角度上来讲 等价于v-if-->
    <!--   v-bind: 将变量的值绑定到属性 -->
    <!--    v-for: 循环数组  v-for="(item,index) in arr"
    循环一定记得加唯一标记符 key-->
    <p>{{time}}</p>
    <p v-text="text"></p>
    <p v-html="text"></p>
    <p v-if="grade >= 90">优秀</p>
    <p v-else-if="grade >= 80">良好</p>
    <p v-else-if="grade >= 70">中等</p>
    <p v-else-if="grade >= 60">及格</p>
    <p v-else>不及格</p>
    <p v-if="name">{{name}}</p>
    <p v-show="grade>90">嘿嘿嘿</p>
    <p :id="pid">这是test的p标签</p>
    <p id="pid">这是test的p标签</p>
    <p id="pid">这是test的p标签</p>

    <p v-for="(item,index) in arr" :key="index">
      {{item}}

    </p>
    <table>
      <tr>
        <td>序号</td>
        <td>序号</td>
        <td>序号</td>
      </tr>
      <tr v-for="(item,index) in students">
        <td>{{index+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.sn}}</td>
      </tr>
    </table>
    <input v-model="inputValue" type="text"> <br>
    输入框的值：{{inputValue}}
    <button id="btn" @click="btnEvent">按钮</button>
    <br>
    当前时间： {{time}}
    <br>
    <button @click="addValue">给数组添加一个值</button>
    <br>
    {{arr}}
    <message page-value="demo"/>
  </div>
</template>

<style scoped>
h1{
  color: red;
}

</style>
<!--随便写点啥-->
<!--组长加了点料-->




